<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
    <!-- 计算属性适用于一个数据受多个数据影响的时候   场景：购物车的合计总金额的这个合计就可以用计算属性来进行计算  1+1=2  这个2就适用于用计算属性实现 -->
    <!-- watch 监听适用于 一个数据影响多个数据   购物车的全选的状态的切换，对应的每一个单品的勾选状态，可以使用watch监听实现   监听全选框的状态-->
</head>

<body>
    <script src="../框架相关的js/vue.js"></script>
    <div id="app">
      
    </div>

    <!-- Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动： -->
    <!-- 侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。 -->
    <!-- 然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子： -->
    <!-- <div id="demo">{{ fullName }}</div>
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
      },
      watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val
        }
      }
    })
    上面代码是命令式且重复的。将它与计算属性的版本进行比较：
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar'
      },
      computed: {
        fullName: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    })
    好得多了，不是吗？ -->

    <script>
        new Vue({
            el: '#app',
            data: {
           
           }

        })
    </script>
</body>

</html>